<template>
    <div class="page">
        <div class="user-list-head">
            {{currentDay|format('YYYY年MM月')}} {{title}} 共{{list.length}}人
        </div>
        <div class="page-list">
            <user-cell @click="goCalendar(item)" :key="`card-${index}`" v-for="(item,index) in list" :org-name="item.orgName"
                       :user-name="item.userName">{{item|numberCount(tag)}}{{append}}</user-cell>
        </div>
    </div>
</template>

<script>
    import UserCell from "../components/UserCell";
    import dayjs from 'dayjs';

    export default {
        name: "CardUserList",
        components: {UserCell},
        data() {
            return {
                currentDay: new Date(),
                title:"迟到",
                tag:"",
                list:[],
                append:""
            }
        },
        filters:{
            numberCount(value,type){
                switch (type){
                    case "late":
                        return value.late;
                    case "leave":
                        return value.leave;
                    case "out":
                        return value.outDay;
                    case "away":
                        return value.away;
                    case "notcard":
                        return value.notCard;
                }
            }
        },
        methods:{
            goCalendar(item){
                this.$router.push({
                    path:"/detail/day/calendar",
                    query:{
                        userId:item.userid,
                        userName:item.userName,
                        date:dayjs(this.currentDay).format('YYYY-MM-DD')
                    }
                })
            }
        },
        mounted() {
            this.currentDay = dayjs(this.$route.query.date).toDate()
            this.title = this.$route.query.title;
            this.list = this.$store.state.monthList;
            this.append = this.$route.query.append;
            this.tag = this.$route.query.tag;

            // this.list = this.$route.params.list;

        }
    }
</script>

<style scoped lang="less">
    .user-list-head {
        background: #f0f0f0;
        height: 40px;
        line-height: 40px;
        color: #999999;
        font-size: 12px;
        padding: 0 15px;
    }
    .page {
        height: 100%;
    }
    .page-list {
        height: calc(~"100% - 40px");
        overflow-y: auto;

    }
</style>